<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .aClass{
            color:red;
        }
        .bClass{
            color:blue;
        }
        .cClass{
            font-size:30px;
        }

    </style>
    <title>04_class与style绑定</title>
</head>
<body>
<!--
1.理解
    在应用界面中，某(个)些元素的样式是变化的
    class/style绑定就是专门用来实现动态样式效果的技术
2.class绑定： ：class='xxx'
    xxx可以是字符串、对象、数组
3.style绑定
    :style="{color :activeColor ,fontSize: fontsize + 'px' }"
    其中activeColoer/fontSize是data属性
-->

<div id="demo">
    <h2>1.class绑定：：class='xxx'</h2>
    <p class="cClass" :class="a">xxx是字符串</p>
    <p class="cClass" :class="{bClass:isB,aClass:isA }">xxx是对象</p>
    <p  :class="['aClass','cClass']">xxx是数组</p>
    <h2>2.style绑定</h2>
    <p :style="{color: activeColor ,fontSize:fontSize + 'px'}">aaaaa</p>
    <button @click="update">更新</button>

</div>


<script type="text/javascript"  src="../js/vue.js"> </script>
<script >
  const vm =new Vue({
    el:'#demo',
    data:{
        a:'aClass',
        isA:true,
        isB:false,
        activeColor:'red',
        fontSize: 20
    },
    methods:{
        update (){
            this.a='bClass'
            this.isB=true
            this.activeColor='blue'
            this.fontSize = 40
        }
    }
  })



</script>

</body>
</html>